<template>
  <div class="index">
    <!-- //静态资源 -->
    <NavBar class="Nav" ref="nav" />
    <!-- //内容模块 -->
    <div class="main_wrap">
      <Headdr class="header" />
      <div class="main">
        <MinTags />

        <router-view class="animated fadeIn fadeInUpBig"></router-view>
      </div>
    </div>
  </div>
</template>
 
<script>
import NavBar from "components/common/NavBar";
import Headdr from "components/common/Header";
import MinTags from "components/common/MinTags";

import Driver from "driver.js"; // import driver.js
import "driver.js/dist/driver.min.css"; // import driver.js css
import steps from "./steps";

export default {
  components: { NavBar, Headdr, MinTags },
  data() {
    return {
      openeds: ["1"],
      uniqueOpened: false,

      driver: null
    };
  },

  methods: {
    handleOpen(key, keyPath) {
      console.log(key, keyPath);
    },
    handleClose(key, keyPath) {
      console.log(key, keyPath);
    },
    
    guide () {
      this.driver.defineSteps(steps)
      this.driver.start()
    }

  },
  mounted() {
    this.$bus.$on("Collapse", () => {
      //收缩侧边栏
      this.$refs.nav.isCollapse = !this.$refs.nav.isCollapse;
    });

    this.$nextTick(function () {
        this.driver = new Driver({
            doneBtnText: "完成", //结束按钮的文字
            stageBackground: 'rgba(255, 255,255 ,.2)', //突出显示元素的背景颜色
            nextBtnText: "下一步", //下一步按钮的文字
            prevBtnText: "上一步", //上一步按钮的文字
            closeBtnText: "关闭", //关闭按钮的文字


        });
        this.driver.defineSteps(steps);
        this.driver.start()
    })
  }
};
</script>
 
<style scoped lang = "scss">
.index {
  width: 100%;
  height: 100%;
  /* background-color:rgba(255, 255,255 ,.3); */
  margin: 0;
  padding: 0;
  display: flex;
}

.Nav {
  /* width: 200px; */
  height: 100%;
  float: left;
}
.main_wrap {
  flex: 1;
}
.header {
  /* width: calc(100% - 200px); */
  width: 100%;
}
.main {
  /* width: calc(100% - 200px); */
  width: 100%;
  padding-top: 3px;
  border-radius: 6px;
  box-shadow: 0 0 4px 0px #000 inset ;
  /* padding-top: 20px; */
  height: 100%;
  box-sizing: border-box;
  background-color: #fff;
  float: left;
  overflow: hidden;
  color: #000;
}
.el-menu-vertical-demo {
  /* width: 200px !important; */
}
</style>